<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" href="../css/main.css" />
		
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script src="../js/vue-lazyload.js"></script>
		<script src="../js/vue-toasted.min.js"></script>
		<script src="../js/new_file.js"></script>
		<script src="../js/ajax.js"></script>
		<script type="text/javascript">
			
		</script>
		<style type="text/css">
			.cash{
				color: red; 
				font-size: 18px;
				font-weight: bold;
				padding: 2%;
			}
			.bar{
				color: #f44;
				font-weight: bold;
				font-size: 18px;
			}
			.van-cell__title{
				margin-left: -100%;
			}
			.freight{
				text-align: center;
				color: #7D7E80;
				margin-top: 4%;
			}
			.genuine{
				 background-color: rgb(243,243,245);
				 padding:5px; 
				 text-align: center; 
				 line-height: 100%;
				 margin-top: 4%;
			}
			.van-icon{
				color: red;
			}
			.images{
				width:100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				<van-nav-bar left-arrow title="🇫🇷红酒" @click-left="onClickLeft" />
			</header>
			<section>
				<van-swipe :autoplay="3000"  indicator-color="green">
				  <van-swipe-item v-for="(image, index) in img" :key="index">
					<img :src="image" style="width: 100%; height: 100%;" />
				  </van-swipe-item>
				</van-swipe>	
				<van-cell-group>
				  <van-cell title="" class="bar">{{ goods.name }}</van-cell>				  
				  <div class="cash">{{ formatPrice(goods.price) }}</div>
				</van-cell-group>
				<van-row class="freight">
					<van-col span="8" offset="1">
						快递：{{ goods.express }}
					</van-col>
					<van-col span="8" offset="4">
						销量 : {{ goods.sales }}
					</van-col>
				</van-row>
				<van-row class="genuine">
					<van-col span="7" offset="0">
						<van-icon name="hot-sale-o" />正品保证</van-col>
					<van-col span="8">
						<van-icon name="refund-o" />极速退款</van-col>
					<van-col span="8">
						<van-icon name="logistics" />两天内发货</van-col>
				</van-row>
				<van-panel title="商品详情">					
					<img v-for="img in images" v-lazy="img" class="images">
				</van-panel>
			</section>
			<footer>
				<van-row>
					<van-col span="4">
						<van-goods-action-mini-btn icon="chat-o" text="客服"></van-goods-action-mini-btn>
					</van-col>
					<van-col span="4">
						<van-goods-action-mini-btn icon="cart-o" text="购物车"></van-goods-action-mini-btn>
					</van-col>
					<van-col span="8">
						<van-goods-action-big-btn text="加入购物车"></van-goods-action-big-btn>
					</van-col>
					<van-col span="8">
						<van-goods-action-big-btn primary text="立即购买" @click="onClick">
						</van-goods-action-big-btn>
					</van-col>
				</van-row>
			</footer>
		</div>
		<script>
			Vue.use(VueLazyload); 
			var vm = new Vue({
				el:"#app",
				data:{
					goods: {
						name: "",
						price: "",
						express: '免运费',
						sales: "",
						
					},
					swipeimages:[],
					img: [
					"../img/250.jpg",
					"../img/b3.jpg",
					"../img/14.jpg"
				  ],
				  images: [
				  	"../img/250.jpg",
				  	"../img/b3.jpg",
				  	"../img/14.jpg"
				  ]
				},
				methods:{
					onClickLeft:function(){
						plus.webview.close(plus.webview.currentWebview(),"slide-out-left");
					},
					onClick:function(){
						// window.location.href = "jiesuan.html";
						var r = plus.webview.create("../Jshui.html","Jshui");
						r.show();
					},
					formatPrice() {
						return '¥' + (this.goods.price / 100).toFixed(2);
					},
					
				},
				mounted(){
					var _this = this;
					ajax({
						url:"http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType:"jsonp",
						data:{gid:11},
						success:function(res){
							console.log(res.Detail);
							_this.swipeimages=res.Detail.SwipeImages;
							_this.goods.name=res.Detail.Name;
							_this.goods.price = res.Detail.MarketPrice;
							_this.goods.sales = res.Detail.SaleCount;
							console.log(_this.swipimages);
						}
					});
					
				}
			})
		</script>
	</body>
</html>
